
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { 
  MessageCircle, 
  Heart, 
  Share, 
  Plus,
  HelpCircle,
  Lightbulb,
  BookOpen
} from "lucide-react";

export const StudentDiscussionFeed = () => {
  const allPosts = [
    {
      id: 1,
      author: "Sarah Chen",
      role: "High School Student",
      time: "2h ago",
      content: "Anyone else struggling with calculus derivatives? Would love to form a study group!",
      tags: ["#calculus", "#studygroup", "#help"],
      type: "question",
      likes: 12,
      replies: 8
    },
    {
      id: 2,
      author: "Mike Johnson",
      role: "College Student",
      time: "4h ago",
      content: "Pro tip: Use the Pomodoro technique for better focus. 25 min work, 5 min break. Game changer! 🍅",
      tags: ["#productivity", "#studytips", "#focus"],
      type: "tip",
      likes: 24,
      replies: 5
    },
    {
      id: 3,
      author: "Emma Rodriguez",
      role: "High School Student",
      time: "6h ago",
      content: "Just finished my first coding project! It's a simple weather app but I'm so proud. Never give up on your dreams! ✨",
      tags: ["#coding", "#achievement", "#motivation"],
      type: "story",
      likes: 38,
      replies: 12
    }
  ];

  const questions = allPosts.filter(post => post.type === "question");
  const studyTips = allPosts.filter(post => post.type === "tip");
  const stories = allPosts.filter(post => post.type === "story");

  const PostCard = ({ post }: { post: any }) => (
    <Card className="hover:shadow-md transition-shadow cursor-pointer">
      <CardContent className="p-6">
        <div className="flex items-start gap-4">
          <Avatar>
            <AvatarFallback>{post.author.split(' ').map((n: string) => n[0]).join('')}</AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
              <span className="font-semibold text-gray-900">{post.author}</span>
              <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">{post.role}</span>
              <span className="text-sm text-gray-500">{post.time}</span>
              {post.type === "question" && (
                <Badge variant="outline" className="text-blue-600 border-blue-200">
                  <HelpCircle className="w-3 h-3 mr-1" />
                  Question
                </Badge>
              )}
              {post.type === "tip" && (
                <Badge variant="outline" className="text-yellow-600 border-yellow-200">
                  <Lightbulb className="w-3 h-3 mr-1" />
                  Tip
                </Badge>
              )}
              {post.type === "story" && (
                <Badge variant="outline" className="text-purple-600 border-purple-200">
                  <BookOpen className="w-3 h-3 mr-1" />
                  Story
                </Badge>
              )}
            </div>
            <p className="text-gray-700 mb-3">{post.content}</p>
            <div className="flex flex-wrap gap-1 mb-3">
              {post.tags.map((tag: string, index: number) => (
                <Badge key={index} variant="secondary" className="text-xs">
                  {tag}
                </Badge>
              ))}
            </div>
            <div className="flex items-center gap-4 text-sm text-gray-500">
              <button className="flex items-center gap-1 hover:text-red-500 transition-colors">
                <Heart className="w-4 h-4" />
                {post.likes}
              </button>
              <button className="flex items-center gap-1 hover:text-blue-500 transition-colors">
                <MessageCircle className="w-4 h-4" />
                {post.replies}
              </button>
              <button className="flex items-center gap-1 hover:text-green-500 transition-colors">
                <Share className="w-4 h-4" />
                Share
              </button>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );

  return (
    <Card className="bg-white shadow-sm border">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl font-semibold flex items-center gap-2">
            <MessageCircle className="w-6 h-6 text-blue-600" />
            Discussion Feed
          </CardTitle>
          <Button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white">
            <Plus className="w-4 h-4 mr-2" />
            Ask a Question
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="all" className="w-full">
          <TabsList className="grid w-full grid-cols-4 mb-6">
            <TabsTrigger value="all">All</TabsTrigger>
            <TabsTrigger value="questions">Questions</TabsTrigger>
            <TabsTrigger value="tips">Study Tips</TabsTrigger>
            <TabsTrigger value="stories">Stories</TabsTrigger>
          </TabsList>

          <TabsContent value="all">
            <div className="space-y-4">
              {allPosts.map((post) => (
                <PostCard key={post.id} post={post} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="questions">
            <div className="space-y-4">
              {questions.length > 0 ? (
                questions.map((post) => (
                  <PostCard key={post.id} post={post} />
                ))
              ) : (
                <div className="text-center py-8 text-gray-500">
                  No questions yet. Be the first to ask!
                </div>
              )}
            </div>
          </TabsContent>

          <TabsContent value="tips">
            <div className="space-y-4">
              {studyTips.length > 0 ? (
                studyTips.map((post) => (
                  <PostCard key={post.id} post={post} />
                ))
              ) : (
                <div className="text-center py-8 text-gray-500">
                  No study tips yet. Share your favorite technique!
                </div>
              )}
            </div>
          </TabsContent>

          <TabsContent value="stories">
            <div className="space-y-4">
              {stories.length > 0 ? (
                stories.map((post) => (
                  <PostCard key={post.id} post={post} />
                ))
              ) : (
                <div className="text-center py-8 text-gray-500">
                  No stories yet. Share your learning journey!
                </div>
              )}
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
};
